OrvalでOpenAPI SpecificationからAPIクライアントとモックを出力する
https://3.bp.blogspot.com/-PSPWJ2Dr0cg/W3abINj2aJI/AAAAAAABN-s/rgmbughXbHwRMuoZY4PVe9U8XrxKTd7vQCLcBGAs/s400/daidougei_temawashi_organ.png
Orval を使用して OpenAPI v3 向けの定義から API クライアントとモック実装を自動生成する手法。
Orval の設定はコマンドラインベースでも行えるが細かい制御ができるよう設定ファイルを書くのがおすすめ。
特に package.json で package: "module" を指定している環境下では orval.config.ts で 設定オブジェクトを default export すると警告なしで出力できる。
今回は OpenAPI v3 向けの YAML を入力し、React 向けにTanStack Query を使用したクライアントコードと MSW v2 を使用したモックコードを出力する指定を行った。
code:orval.config.ts
export default {
main: {
input: {
target: "./tmp/bundled.yml", // 入力となる YAML を指定
},
output: {
clean: true, // 生成先ディレクトリをクリーンアップする
prettier: true, // 生成結果に prettier を適用する
target: "src/api/index.ts", // クライアントコードの生成先
schemas: "src/api/model", // データ構造の生成先
client: "react-query", // Tanstack Query を使用して React 向けのコードを生成する
mock: true, // MSW を使用したモックコードを生成する
override: {
mock: {
delay: 100, // モック実装のAPI実行時間を 100ms に指定 (デフォルト: 1000ms)
},
},
},
},
};
設定が終わったら以下のように順に実行するとコードを生成できる。
(例では redocly を使用してひとまとめになった定義である bundled.yml を生成している)
code:sh
# 定義が別れている場合はまずひとまとめにする
redocly bundle ./path/to/index.yml --output ./tmp/bundled.yml
# まとめた定義をもとにコードを生成する (orval.config.ts の指定を使用するのでオプションなし)
orval
正常に完了すれば 指定した通り src/api 配下にコードが生成される。以下は正常に終了した場合の出力。
code:sh
🍻 Start orval v6.20.0 - A swagger client generator for typescript
main: Cleaning output folder
🎉 main - Your OpenAPI spec has been converted into ready to use orval!